<template>
    <el-dialog :center="center" :close-on-click-modal="false" :width="width" :visible="dialogVisible">
        <div class="dialog-box">
            <div class="dialog-title">{{ title }}</div>
            <div class="dialog-container">
                <!-- 弹窗主体内容自定义 -->
                <slot name="container"></slot>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button :size="btnSize" @click="dialogVisible = false">取消</el-button>
            <el-button :size="btnSize" type="primary" @click="handleConfirm">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
/**
 * 弹窗封装
 * @param {String} title 标题
 * @param {String} width  弹窗宽度
 * @param {Boolean} center  是否让按钮居中显示
 * @param {String} btnSize  按钮大小 medium/small/mini
 * @created 2024-03-22
 * @author Xuyun
 */
export default {
    name: 'cxyPopup',
    props: {
        title: {
            type: String,
            default: '更新'
        },
        width: {
            type: String,
            default: '36%'
        },
        center: {
            type: Boolean,
            default: false
        },
        btnSize: {
            type: String,
            default: 'small'
        },
    },
    data() {
        return {
            dialogVisible: false, // 弹窗显示与隐藏
        }
    },
    computed: {
        // i18n() {
        //     return this.$t('dialog')
        // }
    },
    methods: {
        handleConfirm() {
            this.$emit('handleConfirm')
        },
        async handleClose(done) {
            const result = await this.$confirm('确认关闭?');
            if (result === 'confirm') {
                done();
            }
            return false;
        }
    }
}
</script>

<style>
.el-select {
    width: 100%;
}

.dialog-box {
    width: 100%;
    min-height: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.dialog-title {
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
}

.dialog-container {
    display: flex;
    font-size: 14px;
    font-family: Microsoft YaHei;
}

.el-dialog .el-dialog__header {
    display: none
}
</style>